<template>
	<view class="outBox">
		<Header bgColor="#0d0d0d">
			<view class="header" :style="{height:barHeight + 'px'}">
				<view class="iconMsg">
					<image :src="`${baseImgUrl}home/img1.png`" mode="widthFix"></image>
				</view>
			</view>
		</Header>
		<view class="bigBanner" :style="{
			marginTop:menuHeight - 90 + 'px'
		}">
			<image :src="`${baseImgUrl}home/img2.png`" mode="widthFix"></image>
		</view>
		<view class="content">
			<view class="btnBox">
				<image class="bg" :src="`${baseImgUrl}home/img3.png`" mode="scaleToFill"></image>
				<view class="left">
					<image :src="`${baseImgUrl}home/img4.png`" mode="scaleToFill"  @click="doScan()"></image>
				</view>
				<view class="right">
					<image :src="`${baseImgUrl}home/img5.png`" @click="getnav('/pages/reservation/choice')"
						mode="scaleToFill"></image>
					<image :src="`${baseImgUrl}home/img6.png`" @click="getnav('/pages/manager/index')" mode="scaleToFill">
					</image>
				</view>
			</view>
			<view class="btnBox2">
				<view class="btn" @click="getnav('/pages/distribution/index')">
					<image :src="`${baseImgUrl}home/img7.png`" mode="widthFix">
					<text>分销中心</text>
				</view>
				<view class="btn" @click="getnav('/pages/share/index')">
					<image :src="`${baseImgUrl}home/img8.png`" mode="widthFix"></image>
					<text>分享有礼</text>
				</view>
				<view class="btn" @click="getnav('/pages/mine/storingWine')">
					<image :src="`${baseImgUrl}home/img9.png`"  mode="widthFix"></image>
					<text>酒水寄存</text>
				</view>
			</view>
		</view>
		<Tabbar :currentTab="0"></Tabbar>
		<userLogin ref="userLoginRef" />
	</view>
</template>

<script>
	import Tabbar from '../../components/tabbar.vue';
	import Header from '../../components/header.vue';
	import {
		bannerList
	} from '../../api/api';
	import {
		getWXStatusHeight,
		showToast
	} from '@/utils/index.js'

	export default {
		components: {
			Header,
			Tabbar,
		},
		data() {
			return {
				barHeight: 0, // 状态栏高度
				menuHeight: 0, // 状态栏 + 刘海高度
				bannerList: [
					'https://img0.baidu.com/it/u=1820622523,1497654983&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				current: 0, // 轮播当前值
				baseImgUrl: this.$baseImgUrl
			}
		},

		onLoad(option) {
			let obj = getWXStatusHeight()
			this.barHeight = obj.barHeight
			this.menuHeight = obj.menuHeight

			console.log(obj, "obj");
			const isLogin = this.getIsLogin()
			if (isLogin) {
				// this.getBannerList()
			}
		},
		methods: {
			// 扫码
			doScan() {
				const _this = this
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						_this.afterScanCode(res)
					}
				})
			},
			afterScanCode(res) {
				this.$toast("扫码结果" + res.result)
				console.log(res, "resresres");
			},
			// 获取广告列表
			async getBannerList() {
				const res = await bannerList()
				this.bannerList = res.data.map(item => {
					return {
						...item,
						title: item.bannerTitle
					}
				})
			},
			// 获取登陆信息
			getIsLogin() {
				if (!uni.getStorageSync('token') || (uni.getStorageSync('userInfo') == "null" || !uni.getStorageSync("userInfo"))  ) {
					uni.setStorageSync('showLogin', true)
					this.$refs.userLoginRef.showLogin = true
					return false
				}
				return true
			},
		}
	}
</script>

<style lang="scss">
	// @font-face {
	// 	font-family: 'ITC';
	// 	src: url("http://1.92.107.135:8082/woff/BRADHITC.woff");
	// }
	// @font-face {
	// 	font-family: "华文琥珀";
	// 	src: url("http://1.92.107.135:8082/woff/STHUPO.woff");
	// }

	// @font-face {
	// 	font-family: '华文细黑';
	// 	src: url("http://1.92.107.135:8082/woff/STXIHEI.woff");
	// }
	.outBox{
		background-color: #0d0d0d;
		min-height: 100vh;
	}
	.btnBox2 {
		width: 100%;
		height: 182rpx;
		background: #161616;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 24rpx;
		padding: 0 82rpx;
		box-sizing: border-box;

		.btn {
			display: flex;
			align-items: center;
			flex-direction: column;

			text {
				color: #7f7f7f;
				font-size: 24rpx;
			}

			image {
				width: 64rpx;
				margin-bottom: 10rpx;
			}
		}
	}

	.btnBox {
		width: 100%;
		height: 400rpx;
		padding: 24rpx;
		box-sizing: border-box;
		display: flex;
		position: relative;

		.left {
			width: 306rpx;
			height: 100%;
			position: relative;
			z-index: 1;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.right {
			flex: 1;
			margin-left: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			position: relative;
			z-index: 1;

			image {
				width: 100%;
				height: 160rpx;
			}
		}

		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
		}
	}

	.bigBanner {
		font-size: 0;

		image {
			margin-top: -20rpx;
			width: 100%;
		}

	}

	.content {
		margin-top: - 100rpx;
		padding: 20rpx 40rpx;
		padding-bottom: 150rpx;
		background-color: #0d0d0d;

		.title {
			font-family: 'ITC';
		}
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		box-sizing: border-box;

		.iconMsg {
			image {
				width: 200rpx;
			}
		}

		.name {
			color: #fff;
		}
	}
</style>
